<%--
  Created by IntelliJ IDEA.
  User: 熊婷
  Date: 2025/6/25
  Time: 9:55
  To change this template use File | Settings | File Templates.
--%>
<%--
  Created by IntelliJ IDEA.
  User: 熊婷
  Date: 2025/6/24
  Time: 11:08
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康饮食管理系统</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            background-color: #f5f9fa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 100%;
            padding: 0 15px;
        }

        /* 顶部导航栏 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: #4CAF50;
            color: white;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .user-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #fff;
            color: #4CAF50;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            cursor: pointer;
        }

        .cart-icon {
            position: relative;
            font-size: 1.2rem;
            cursor: pointer;
        }

        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: #ff5722;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 健康概览卡片 */
        .health-overview {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin: 20px 0;
        }

        .health-card {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            flex: 1;
            min-width: 200px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .health-card h3 {
            font-size: 1rem;
            margin-bottom: 10px;
            color: #4CAF50;
        }

        .progress-bar {
            height: 10px;
            background-color: #e0e0e0;
            border-radius: 5px;
            margin: 10px 0;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background-color: #4CAF50;
            width: 80%;
        }

        /* 核心功能模块 */
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin: 25px 0;
        }

        .feature-card {
            background-color: white;
            border-radius: 10px;
            padding: 20px 10px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: transform 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            font-size: 2rem;
            margin-bottom: 10px;
            color: #4CAF50;
        }

        /* 食谱推荐 */
        .recipe-section {
            margin: 30px 0;
        }

        .recipe-section h2 {
            margin-bottom: 15px;
            color: #4CAF50;
        }

        .recipe-scroll {
            display: flex;
            overflow-x: auto;
            gap: 15px;
            padding: 10px 0;
        }

        .recipe-card {
            min-width: 200px;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .recipe-img {
            height: 120px;
            background-color: #ddd;
            background-size: cover;
            background-position: center;
        }

        .recipe-info {
            padding: 10px;
        }

        .recipe-title {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .recipe-calories {
            color: #4CAF50;
            font-size: 0.9rem;
        }

        /* 快捷操作 */
        .quick-actions {
            position: fixed;
            bottom: 80px;
            right: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .action-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
            cursor: pointer;
            transition: transform 0.3s;
        }

        .action-btn:hover {
            transform: scale(1.1);
        }

        /* 底部菜单 */
        .bottom-menu {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
        }

        .menu-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            text-decoration: none;
            font-size: 0.9rem;
        }

        .menu-item.active {
            color: #4CAF50;
        }

        .menu-icon {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }
        :root {
            --primary-green: #4CAF50;
            --dark-green: #388E3C;
            --light-green: #8BC34A;
            --lighter-green: #C8E6C9;
            --accent-green: #2E7D32;
            --text-dark: #333333;
            --text-light: #ffffff;
            --shadow-color: rgba(76, 175, 80, 0.2);
        }

        /* 食谱推荐部分 - 绿色系风格 */
        :root {
            --primary-green: #5CB85C;  /* 主绿色 */
            --soft-green: #8FD694;     /* 柔和绿 */
            --light-green: #C1E1C1;    /* 浅绿 */
            --dark-green: #4A9D4A;     /* 深绿 */
            --pale-green: #E8F5E9;     /* 淡绿 */
            --text-dark: #2E3D33;      /* 深灰绿 */
            --text-light: #FFFFFF;     /* 纯白 */
            --shadow-color: rgba(92, 184, 92, 0.15); /* 柔和阴影 */
        }

        /* 食谱推荐部分 - 和谐绿色风格 */
        .recipe-section {
            margin: 40px 0;
            padding: 0 15px;
        }

        .recipe-section h2 {
            margin-bottom: 20px;
            color: var(--dark-green);
            font-size: 1.5rem;
            font-weight: 600;
            padding-left: 5px;
            position: relative;
            letter-spacing: 0.5px;
        }

        .recipe-section h2:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 50px;
            height: 3px;
            background: linear-gradient(to right, var(--primary-green), var(--soft-green));
            border-radius: 3px;
        }

        .recipe-scroll {
            display: flex;
            overflow-x: auto;
            gap: 25px;
            padding: 20px 5px;
            scrollbar-width: thin;
            -webkit-overflow-scrolling: touch;
        }

        .recipe-scroll::-webkit-scrollbar {
            height: 6px;
            background-color: var(--pale-green);
        }

        .recipe-scroll::-webkit-scrollbar-thumb {
            background-color: var(--soft-green);
            border-radius: 3px;
        }

        .recipe-card {
            min-width: 250px;
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px var(--shadow-color);
            transition: all 0.3s ease;
            flex-shrink: 0;
            border: 1px solid var(--light-green);
        }

        .recipe-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(92, 184, 92, 0.2);
        }

        .recipe-img {
            height: 160px;
            background-color: var(--pale-green);
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .recipe-img:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
        }

        .recipe-info {
            padding: 18px;
            background-color: white;
        }

        .recipe-title {
            font-weight: 600;
            margin-bottom: 12px;
            font-size: 1.15rem;
            color: var(--text-dark);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .recipe-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .recipe-calories {
            color: var(--dark-green);
            font-weight: 500;
            font-size: 0.95rem;
            background-color: var(--pale-green);
            padding: 5px 12px;
            border-radius: 15px;
            display: flex;
            align-items: center;
        }

        .recipe-calories:before {
            content: "🔥";
            margin-right: 5px;
            font-size: 0.9rem;
        }

        .recipe-type {
            color: var(--primary-green);
            background: var(--pale-green);
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .recipe-actions {
            display: flex;
            gap: 12px;
            margin-top: 15px;
        }

        .recipe-actions a {
            flex: 1;
            text-align: center;
            padding: 10px 0;
            border-radius: 8px;
            font-size: 0.95rem;
            text-decoration: none;
            transition: all 0.3s ease;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
        }

        .buy-now-btn {
            background-color: var(--dark-green);
            color: var(--text-light);
        }

        .buy-now-btn:hover {
            background-color: #3E8E3E;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(62, 142, 62, 0.2);
        }

        .add-to-cart-btn {
            background-color: var(--primary-green);
            color: var(--text-light);
        }

        .add-to-cart-btn:hover {
            background-color: var(--dark-green);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(74, 157, 74, 0.2);
        }

        /* 按钮图标样式 */
        .recipe-actions i {
            margin-right: 8px;
            font-size: 0.9rem;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .recipe-card {
                min-width: 220px;
            }

            .recipe-actions {
                flex-direction: column;
                gap: 10px;
            }

            .recipe-actions a {
                padding: 8px 0;
            }
        }
        /* 更新按钮样式 */
        .recipe-actions {
            display: flex;
            gap: 12px;
            margin-top: 15px;
        }

        .recipe-actions button,
        .recipe-actions a {
            flex: 1;
            text-align: center;
            padding: 10px 0;
            border-radius: 8px;
            font-size: 0.95rem;
            text-decoration: none;
            transition: all 0.3s ease;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
        }

        /* 统一按钮样式 - 使用与立即购买相同的深绿色 */
        .add-to-cart-btn,
        .buy-now-btn {
            background-color: var(--dark-green);
            color: var(--text-light);
        }

        .add-to-cart-btn:hover,
        .buy-now-btn:hover {
            background-color: #3E8E3E;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(62, 142, 62, 0.2);
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- 顶部导航栏 -->
<div class="navbar">
    <div class="logo">健康饮食</div>
    <div class="user-actions">
        <div class="cart-icon">
            <!-- 购物车图标 - 确保href属性完整且引号正确 -->
            <a href="${pageContext.request.contextPath}/shopcart/list" class="fas fa-shopping-cart"></a>
            <span class="cart-count">3</span>
        </div>
        <div class="user-avatar">张</div>
    </div>
</div>
<div class="container">
    <!-- 健康概览 -->
    <div class="health-overview">
        <div class="health-card">
            <h3>今日摄入</h3>
            <div>🔥 1200/1500 kcal</div>
            <div class="progress-bar">
                <div class="progress" style="width: 80%"></div>
            </div>
            <div>🍞 碳水45% | 🥩 蛋白质30% | 🥑 脂肪25%</div>
        </div>

        <div class="health-card">
            <h3>饮水记录</h3>
            <div>💧 5/8杯</div>
            <div class="progress-bar">
                <div class="progress" style="width: 62%"></div>
            </div>
            <div>最后记录: 30分钟前</div>
        </div>

        <div class="health-card">
            <h3>近期目标</h3>
            <div>✔️ 连续打卡7天</div>
            <div>⏳ 减重2kg (进行中)</div>
            <div class="progress-bar">
                <div class="progress" style="width: 40%"></div>
            </div>
        </div>
    </div>

    <!-- 核心功能 -->
    <div class="features">
        <div class="feature-card">
            <div class="feature-icon"><i class="fas fa-utensils"></i></div>
            <div><a href="/ssm_demo/dietrecord/list">饮食记录</a></div>
        </div>
        <div class="feature-card">
            <div class="feature-icon"><i class="fas fa-lightbulb"></i></div>
            <div><a href="/ssm_demo/foodscategory/list">成品分类</a></div>
        </div>
        <div class="feature-card">
            <div class="feature-icon"><i class="fas fa-chart-pie"></i></div>
            <div><a href="/ssm_demo/foodsrecipe/list">营养分析</a></div>
        </div>
        <div class="feature-card">
            <div class="feature-icon"><i class="fas fa-calendar-check"></i></div>
            <div><a href="/ssm_demo/plan/list">我的计划</a></div>
        </div>
    </div>

    <!-- 今日推荐食谱 -->
    <!-- 推荐食谱部分 -->
    <!-- 调试信息 -->

    <!-- 今日推荐食谱 -->
    <div class="recipe-section">
        <div style="display: flex; justify-content: space-between; align-items: center;">
            <h2>今日推荐食谱</h2>
            <a href="/ssm_demo/foods/list" style="color: var(--dark-green); text-decoration: none; font-weight: 500; font-size: 0.95rem;">
                查看全部 <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="recipe-scroll">
            <c:forEach items="${recommendedRecipes}" var="recipe">
                <div class="recipe-card">
                    <div class="recipe-img"
                         style="background-image: url('${not empty recipe.img ? recipe.img : '/images/default-food.jpg'}')">
                    </div>
                    <div class="recipe-info">
                        <div class="recipe-title">${recipe.recipename}</div>
                        <div class="recipe-meta">
                            <span class="recipe-calories">${recipe.calories}kcal</span>
                            <span class="recipe-type">${recipe.type}</span>
                        </div>
                        <div class="recipe-actions">
                            <a href="javascript:void(0);" class="buy-now-btn" onclick="submitPostForm()">
                                <i class="fas fa-bolt" style="margin-right: 5px;"></i>立即购买
                            </a>
                            <form action="/ssm_demo/shopcart/add" method="POST">
                                <input type="hidden" name="recipeid" value="${recipe.recipeid}">
                                <button type="submit" class="add-to-cart-btn">
                                    <i class="fas fa-cart-plus" style="margin-right: 5px;"></i>加入购物车
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>

<!-- 快捷操作 -->
<div class="quick-actions">
    <div class="action-btn" title="拍照识食物"><i class="fas fa-camera"></i></div>
    <div class="action-btn" title="手动添加"><i class="fas fa-pencil-alt"></i></div>
    <div class="action-btn" title="打卡成就"><i class="fas fa-trophy"></i></div>
</div>

<!-- 底部菜单 -->
<div class="bottom-menu">
    <a href="index.jsp" class="menu-item active">
        <div class="menu-icon"><i class="fas fa-home"></i></div>
        <div>首页</div>
    </a>
    <a href="/ssm_demo/healthmetrics/list" class="menu-item">
        <div class="menu-icon"><i class="fas fa-book"></i></div>
        <div>健康指标</div>
    </a>
    <a href="/ssm_demo/weightrecord/list" class="menu-item">
        <div class="menu-icon"><i class="fas fa-users"></i></div>
        <div>体重记录</div>
    </a>
    <a href="/ssm_demo/profile" class="menu-item">
        <div class="menu-icon"><i class="fas fa-user"></i></div>
        <div>个人中心</div>
    </a>
    <a href="/ssm_demo/order/list" class="menu-item">  <!-- 新增我的订单入口 -->
        <div class="menu-icon"><i class="fas fa-clipboard-list"></i></div>
        <div>我的订单</div>
    </a>
</div>
</div>
<script>
    function addToCart(recipeId) {
        fetch('/ssm_demo/shopcart/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `recipeid=${recipeId}`  // 注意参数名全小写
        })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    alert('添加成功！');
                } else {
                    alert('失败: ' + data.message);
                }
            });
    }
    function submitPostForm() {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/ssm_demo/api/alipay/pay';

        // 如果需要参数，可以添加隐藏字段
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'orderId';
        input.value = ${orderid}; // 替换为实际订单ID
        form.appendChild(input);

        document.body.appendChild(form);
        form.submit();
    }
    // 简单的交互功能


    // 快捷按钮点击事件
    const actionBtns = document.querySelectorAll('.action-btn');
    actionBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const action = this.getAttribute('title');
            alert(`准备执行: ${action}操作`);
        });
    });


</script>
</body>
</html>